<template>
  <div v-if="visible" style="z-index: 99999">
    fjkerjfklerjklfrejljlk
    <template v-if="type === 'pic'">
      11111111111111111111
      <component :is="type" :src="src" @close="handleClose"></component>
    </template>
    <template v-else>
      22222222222222
      <el-dialog
        title="预览"
        v-model="visible"
        :modal="false"
        :append-to-body="true"
        style="z-index:3000"
        :fullscreen="true"
        :lock-scroll="false"
        :center="true"
        :destroy-on-close="true"
        :before-close="handleClose">
        <template #header="scope">
          <div style="align-items: center;text-align: center; width: 100%">
            <div style="font-weight: bold; ">
              {{fileName}}
            </div>
            <!--<el-button type="primary" size="small" style="margin-left: 20px" @click="otherType">下载</el-button>-->
          </div>
        </template>
        <div :style="[{width: width, height: height}]" :class="classCss">
          <!--<component :is="type" :src="src"></component>-->
          <pdf :src="src"></pdf>
        </div>
      </el-dialog>
    </template>
  </div>
</template>

<script>
  import pdf from "./pdf.vue";
  // import xlsx from "./xlsx";
  // import docx from "./docx.vue";
  import pic from "./pic.vue";
  // import txt from "./txt.vue";

  export default {
    name: "main",
    props: {
      classCss: {
        type: Object
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "calc(100vh - 117px)"
      },
      // src: {
      //   type: String
      // },
    },
    components: {
      pdf,  pic,
    },
    data() {
      return {
        config: [
          {
            extensions: ["pdf"],
            componentName: "pdf",
          },
          // {
          //   extensions: ["xlsx"],
          //   componentName: "xlsx",
          // },
          // {
          //   extensions: ["docx"],
          //   componentName: "docx",
          // },
          {
            extensions: ["bmp", "jpg", "png", "tif", "gif", "webp", "apng", "icon"],
            componentName: "pic",
          },
          // {
          //   extensions: ["txt"],
          //   componentName: "txt",
          // },
        ],
        type: {},
        visible: false,
        option: {url: '', originUrl: ""},
      }
    },
    watch: {
      option(val) {
        this.type = this.init(val.url);
        console.log(this.type);
      }
    },
    computed: {
      fileName() {
        if (!this.option.url) return "";
        return this.option.url.substr(this.option.url.lastIndexOf("/") + 1)
      },
      src() {
          console.log("src",this.option.url);
          if (this.type === "pdf") {
          return this.option.url;
        } else {
          return this.option.originUrl;
        }
      }
    },
    mounted() {
      // this.type = this.init(this.option.url);
    },
    methods: {
      init(src) {
        if (!src) return;
        let type = src.substr(src.lastIndexOf(".") + 1);
        if (type) {
          type = type.toLocaleLowerCase();
          for (let item of this.config) {
            if (item.extensions.includes(type)) {
              return item.componentName;
            }
          }
        }
        this.$nextTick(() => {
          this.otherType();
        });
        return null
      },
      open(option) {
          console.log("option",option);
        this.option = option;
        this.visible = true;
      },
      otherType() {
        fetch(this.option.originUrl).then(res => res.blob()).then((blob) => {
          let name = this.src.substr(this.src.lastIndexOf("/") + 1);
          const link = document.createElement('a'); //创建下载a标签
          link.href = URL.createObjectURL(blob);
          link.target = "downloadFile";
          link.download = name; //下载后文件名
          link.style.display = 'none'; //默认隐藏元素
          document.body.appendChild(link); // body中添加元素
          link.click(); // 执行点击事件
          URL.revokeObjectURL(link.href); //释放Blob对象
          document.body.removeChild(link);//下载完成后移除元素
        });
      },
      handleClose() {
        this.visible = false;
      }
    }
  }
</script>

<style scoped>
</style>
